<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset=utf-8/>
    <title>videojs-contrib-hls embed</title>
    <link href="http://g.alicdn.com/code/lib/video.js/7.9.7/video-js.min.css" rel="stylesheet">
    <script src="http://g.alicdn.com/code/lib/video.js/7.9.7/video.min.js"></script>
    <script src="http://g.alicdn.com/linkplatform/videojs-plugins/0.0.3??videojs-tech-flv.js,videojs-plugin-hls-compat.js"></script>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>


<body>
<div class="container">
    <div id="videoEl" class="video-js vjs-default-skin vjs-fluid"></div>
</div>
</body>

<script>
  if (!videojs.getTech('flv')) {
    videojs.registerTech('flv', videojsTechFlv);
  }
  if (!videojs.getPlugin('hlsCompat')) {
    videojs.registerPlugin('hlsCompat', videojsPluginHlsCompat);
  }

  function getStreamUrl() {
    let addr = location.search.replace('?addr=', '');
    //请求播放地址，xx.xx.xx.xx为您的服务器地址，scheme为播放协议类型，iotId为设备ID，instanceId为实例ID
    return fetch(decodeURIComponent(addr))

      .then(response => response.text())
      .then(data => {
        console.log(data);
        return data;
      });
  }

  function getSourceType(url) {
    let type = '';
    if (/\.flv/.test(url)) {
      type = 'video/x-flv';
    } else if (/\.m3u8/.test(url)) {
      type = 'application/x-mpegURL';
    } else if (/\.mp4/.test(url)) {
      type = 'video/mp4';
    }
    return type;
  }

  function createPlayer(cb) {
    var videoEl = document.getElementById('videoEl');
    var player = videojs(videoEl, {
      autoplay: false,
      muted: true,
      controls: true,
      preload: 'none',
      loop: false,
      techOrder: ['flv', 'html5'],
      flv: {
        reconnInterval: 5000,
        reconnTimes: 10,
        getStreamUrl,
        mediaDataSource: {
          cors: true,
          withCredentials: true
        },
        flvConfig: {
          lazyLoadMaxDuration: 24 * 60 * 60,
        },
      },
      html5: {
        hls: {
          cacheEncryptionKeys: true,
        },
      },
    }, cb);

    player.on('error', (e) => {
      console.error('videojs error: ', e);
    });
    player.on('flvError', (e) => {
      console.error('flv error: ', e.errorInfo);
    });

    var wrappedPlayer = {
      play: function (loadSource) {
        if (loadSource) {
          if (!player.paused()) {
            player.pause();
          }
          player.reset();
          player.removeClass('vjs-paused');
          player.addClass('vjs-waiting');
          return getStreamUrl().then((url) => {
            var source = {
              src: url,
              type: getSourceType(url)
            };
            player.src(source);
            player.autoplay(true);
            player.load();
          });
        }

        return player.play();
      },

      pause: function () {
        return player.pause();
      }
    }

    return wrappedPlayer;
  }

  if (!videojs.getTech('flv')) {
    videojs.registerTech('flv', videojsTechFlv);
  }
  if (!videojs.getPlugin('hlsCompat')) {
    videojs.registerPlugin('hlsCompat', videojsPluginHlsCompat);
  }

  const player = createPlayer(function () {
    player.play(true);
  });
</script>